<template>
	<view class="user-main-conatiner">
	  <view class="user-info-box">
	    <view class="kefu-box">
	      <image src="/static/svg/kefu.svg" @click="openKefu"></image>
	      <image src="/static/svg/set.svg" @click="openSetting"></image>
	    </view>
	    <view class="avatar-box" v-if="isLogin" @click="navToUserInfo">
	      <view class="avatar">
	        <image :src="loginInfo?.avatar" ></image>
	      </view>
	      <view class="user-name">{{loginInfo.nickname}}</view>
	      <image src="/static/svg/row.svg"></image>
	    </view>
	    <view class="avatar-box" v-else @click="navToUserInfo">
	      <view class="avatar"></view>
	      <view class="user-name">点击登录</view>
	      <image src="/static/svg/row.svg"></image>
	    </view>
	  </view>
	  
	  <view class="user-option" v-for="(item, index) in optionList" :key="index"  @click="handleNavTo(item.isWeb,item.url)">
	    <view class="option-container">
	      <view class="option-item-icon">
	        <image class="my-icon" :src="item.icon"></image>
	      </view>
	      <view class="option-item-name">
	        {{item.name}}
	      </view>
	    </view>
	    <view class="arrow-icon">
	      <image class="my-icon" src="/static/images/arrow.png"></image>
	    </view>
	  </view>
	</view>
</template>

<script>
	const app = getApp()
	export default{
		props:['isLogin','loginInfo'],
		data(){
			return {
				optionList:[
				  // {
				  //   name:'设置',
				  //   icon:'./images/setting-icon.png',
				  //   isWeb:false,
				  //   url:'/pages/setting/setting'
				  // },
				  {
				    name:'健康知识',
				    icon:'/static/images/healthy.png',
				    isWeb:true,
				    url:'https://www.machineeye.cn/hongfei-page/jiankang-page/'
				  },
				  // {
				  //   name:'客服中心',
				  //   icon:'./images/kefu-icon.png',
				  //   isWeb:true,
				  //   url:'/pages/setting/setting'
				  // },
				  {
				    name:'关于我们',
				    icon:'/static/images/about.png',
				    isWeb:true,
				    url:'https://www.machineeye.cn/hongfei-page/about-us/'
				  },
				 
				  {
				    name:'帮助中心',
				    icon:'/static/images/help.png',
				    isWeb:true,
				    url:'https://www.machineeye.cn/hongfei-page/help-web/'
				  },
				   {
				    name:'城市CEO申请',
				    icon:'/static/images/ceo.png',
				    isWeb:true,
				    url:'https://www.machineeye.cn/hongfei-page/ceo-register/'
				  },
				  // {
				  //   name:'绑定邀请人',
				  //   icon:'/static/images/about-icon.png',
				  //   isWeb:true,
				  //   url:`https://www.machineeye.cn/bind/index.html?token=xxx/#`
				  // }
				],
			}
		},
		methods:{
			handleNavTo(isWeb,url){
			  if(isWeb){
			    getApp().globalData.webViewUrl = url
			    uni.navigateTo({
			      url: '/pages/web-page/web-page',
			    })
			  } else {
			    uni.navigateTo({
			      url: url,
			    })
			  }
			},
			navToUserInfo(){
			  if(!this.isLogin){
			    return uni.navigateTo({
			      url:'/pages/login/login'
			    })
			  }
			  uni.navigateTo({
			    url: '/pages/user-info/user-info',
			  })
			},
			openKefu(){
			  uni.makePhoneCall({
			    phoneNumber: '4007777776',
			  })
			},
			openSetting(){
			  uni.navigateTo({
			    url: '/pages/setting/setting',
			  })
			}
		}
	}
</script>

<style>
	/* components/user-center/user-center.wxss */
	.user-main-conatiner{
	  background-color: #FBFBFBFF;
	  width: 100%;
	  height: 100%;
	  
	}
	
	.user-info-box{
	  width: 100vw;
	  height: 366rpx;
	  position: relative;
	  background-color: #f5736e;
	  display: flex;
	  flex-direction: column;
	  padding-top: 100rpx;
	}
	.kefu-box{
	  padding: 0 36rpx;
	  padding-top: 16rpx;
	  text-align: right;
	}
	.kefu-box image{
	  width: 50rpx;
	  height: 50rpx;
	}
	.kefu-box image:last-child{
	  margin-left: 20rpx;
	}
	.avatar-box{
	  flex-grow: 1;
	  position: relative;
	  display: flex;
	  padding: 0 40rpx;
	  align-items: center;
	}
	.avatar{
	  flex-shrink: 0;
	  width: 120rpx;
	  height: 120rpx;
	  border-radius: 120rpx;
	  border: 4rpx solid #fff;
	}
	.avatar image{
	  width: 100%;
	  height: 100%;
	  border-radius: 120px;
	}
	.user-name{
	  margin-left: 24rpx;
	  font-size: 48rpx;
	  color: #fff;
	}
	.avatar-box >image{
	  width: 22rpx;
	  height: 32rpx;
	  position: absolute;
	  top: 50%;
	  right: 40rpx;
	  transform: translate(0,-50%);
	}
	.user-option{
	  width: 100%;
	  box-sizing: border-box;
	  padding:0 40rpx;
	  padding-top: 70rpx;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.option-container{
	  width: 50%;
	  display: flex;
	  align-items: center;
	  position: relative;
	}
	.option-item-icon{
	  width: 54rpx;
	  height: 54rpx;
	  position: absolute;
	}
	.option-item-name{
	  display: flex;
	  align-items: center;
	  margin-left: 110rpx;
	  font-size: 32rpx;
	  height: 32rpx;
	  color: #333;
	}
	.arrow-icon{
	  width: 20rpx;
	  height: 28rpx;
	}
	.my-icon{
	  width: 100%;
	  height: 100%;
	}
</style>